import React, { Component } from 'react';
import { PageHeader, Button, Alert, Divider, Badge, Modal } from 'antd';
import { BasicLayout, BasicLayoutSearch } from '../../../../components/BasicLayout';
import { BasicPagination, TableCustomize, openSuccessModal, openModalMessage } from '../../InspectionStandard/ShiftIns/TableCustomize';
import SearchForm from './SearchForm';
import * as APIService from '../../../../axios/api_yq'

export default class Member extends Component {
    state = {
        dataSource: [
        ],
        inquire: [],
        paging: {},
        formData: {},
        drawerTitle: '',
        createTime: null,
        loading: false,
        some: null,
        selectedRows: [],
        advanced: false,
        values: {},
        selectedRowKeys: [],
        control: false
    };
    // 挂载前
    UNSAFE_componentWillMount() {
        this.fetch();
    }
    componentWillUnmount() {
        this.setState = () => {
            return;
        };
    }
    //初始化加载数据
    fetch = (page = 1, size = 100) => {
        const { values } = this.state
        this.setState({
            loading: true,
            formData: {},
            selectedRowKeys: [],
            some: null,
            paging: { pageNum: page, pageSize: size }
        })
        let a = { pageNum: page, pageSize: size }
        setTimeout(() => {
            this.search({ ...values, ...a })
        }, 300);
    }
    // 查询接口
    search = (value) => {
        let groupId = JSON.parse(sessionStorage.getItem('members')).id
        APIService.queryGroupUser({ ...value, groupId }).then((item) => {
            console.log('查询数据', item);
            if (item.data.code === 200) {
                this.setState({
                    loading: false,
                    dataSource: item.data.data.data,
                    // 操作后清除选中
                    selectedRowKeys: [],
                    selectedRows: [],
                    some: null,
                    paging: {
                        pageNum: item.data.data.pageNum,
                        pageSize: item.data.data.pageSize,
                        total: item.data.data.total,
                    }
                })
            } else {
                openModalMessage('error', item.data.msg)
            }
        })
    }
    // 条件查询查询
    handleSearch = value => {
        const { paging, values } = this.state
        let a = { pageNum: paging.pageNum, pageSize: paging.pageSize }
        this.setState({
            values: value
        })
        // console.log({ ...values, ...a });
        this.search({ ...value, ...a })
    };
    //添加
    create = () => {
        const { selectedRows, some, values, paging } = this.state
        let a = JSON.parse(sessionStorage.getItem('members'))
        let data = { "list": [...selectedRows], ...a }
        console.log('添加的数据', data);
        if (some > 0) {
            APIService.addGroupUser(data).then((item) => {
                if (item.data.code === 200) {
                    openSuccessModal('成功')
                    this.search({ ...values, ...paging })
                } else {
                    openModalMessage('error', item.data.msg)
                }
            })
        } else {
            openModalMessage('error', '请选择数据')
        }
    };
    // 删除
    derive = () => {
        const { selectedRows, some, values, paging } = this.state
        let id = []
        selectedRows.forEach(item => {
            id.push(item.id)
        })

        let data = `idList=${id}`
        console.log('删除id', data);
        if (some > 0) {
            APIService.deleteGroupUser(data).then((item) => {
                if (item.data.code === 200) {
                    openSuccessModal('成功')
                    this.search({ ...values, ...paging })
                } else {
                    openModalMessage('error', item.data.msg)
                }
            })
        } else {
            openModalMessage('error', '请选择数据')
        }
    }

    // 重置
    cz = () => {
        const { paging } = this.state
        this.setState({
            values: null
        }, () => { this.fetch() })

    }
    // 高级查询
    advancedss = () => {
        console.log('高级查询');
        this.setState({ advanced: !this.state.advanced })
    }
    render() {
        const { control, selectedRowKeys, advanced, some, paging, loading, dataSource } = this.state;
        const rowSelection = {
            type: 'checkbox',
            selectedRowKeys: selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                let some = [...selectedRows].length
                this.setState({
                    some: some,
                    selectedRows: selectedRows,
                    selectedRowKeys: selectedRowKeys
                }, () => {
                    console.log('选中个数', this.state.some, '选中详细数据', this.state.selectedRows);
                })
                if (some === 0 || some === null) {
                    this.setState({
                        control: false
                    })
                } else {
                    this.setState({
                        control: true
                    })
                }
            },
        }
        const columns = [
            {
                title: '序号',
                dataIndex: 'number',
                width: 50,
                align: 'center',
                render: (text, record, index) =>
                    <div>
                        {index + 1}
                    </div>
            },
            {
                title: '姓名',
                dataIndex: 'userName',
                width: 80,
            },
            {
                title: '班组名称',
                dataIndex: 'groupName',
                width: 100
            },
            {
                title: '工厂',
                width: 100,
                dataIndex: 'factory',
            },
            {
                title: '部门',
                width: 130,
                dataIndex: 'department',
            },
            {
                title: '岗位',
                width: 100,
                dataIndex: 'post',
            },
            {
                title: '手机号',
                width: 120,
                dataIndex: 'phoneNumber',
            },
            {
                title: '角色',
                dataIndex: 'role',
                width: 80,
            },
            { dataIndex: '' }
        ]
        return <div>
            <BasicLayoutSearch>
                <PageHeader
                    style={{ padding: '4px 24px' }}
                    onBack={() => window.history.back()}
                    title={'生产班组维护'}>
                </PageHeader>
                <Divider />
                <SearchForm onSearch={this.handleSearch}
                    onClick={this.cz}
                    onClick1={this.advancedss}
                    advanced={advanced}
                />
            </BasicLayoutSearch>
            {
                control === true ? <Alert message={<div>已选择 <span style={{ color: '#5abcff' }}>{some}</span> 项 </div>} type="info" showIcon style={{ width: '99%', margin: 'auto' }} /> : null
            }
            <BasicLayout
                name="成员管理"
                icon="table"
                buttons={[
                    <Button key={1} onClick={this.create} type="primary" icon='plus'>添加</Button>,
                    <Button key={4} onClick={this.derive} type="primary" icon='line'>删除</Button>,
                ]}
            >
                <TableCustomize
                    rowSelection={rowSelection}
                    columns={columns}
                    rowKey={(record) => record.id}
                    dataSource={dataSource}
                    pagination={false}
                    loading={loading}
                    allowDrafting={true}
                    rowClassName={(record, index) => {
                        return record.sort === 1 ? 'currentRecord' : ''
                    }}
                    // rowClassName={(record, index) => {
                    //     return (['editable-row', record.sort === 1 ? 'currentRecord' : '', index % 2 === 0 ? 'editable-row' : 'editable-row12'])
                    // }}
                    scroll={{ x: true, y: 600 }}
                />
                <BasicPagination pageNum={paging.pageNum} pageSize={paging.pageSize} total={paging.total} loadData={this.fetch} />
            </BasicLayout>
        </div>;
    }
}
